<template>
  <div class="table">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="sort" label="序号" width="180">
        <template slot-scope="scope">{{scope.$index + 1}}</template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>

</template>
<script>
import Sortable from 'sortablejs'
export default {
  name: "TableSort",
  data() {
    return {
      drawer: '',
      tableData: []
    };
  },
  created() {
    this.tableData = [
      {
        date: "2016-05-02",
        name: "王小虎1",
        address: "上海市普陀区金沙江路 1518 弄"
      },
      {
        date: "2016-05-04",
        name: "王小虎2",
        address: "上海市普陀区金沙江路 1517 弄"
      },
      {
        date: "2016-05-01",
        name: "王小虎3",
        address: "上海市普陀区金沙江路 1519 弄"
      },
      {
        date: "2016-05-03",
        name: "王小虎4",
        address: "上海市普陀区金沙江路 1516 弄"
      }
    ]
    this.$nextTick(()=>{
      this.drawer = document.querySelectorAll('.el-table__body-wrapper tbody')[0]
      this.rowInit()
    })
  },
  methods: {
    rowInit() {
      const tbody = this.drawer
      const _this = this
      this.sortable = Sortable.create(tbody, {
        onEnd({newIndex, oldIndex}) {
          const oldData = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, oldData)
          var newArray = _this.tableData.slice(0)
          _this.tableData = []
          _this.$nextTick(()=>{
            _this.tableData = newArray
          })
        }
      })
    }
  }
};
</script>
<style scoped lang="less">
.table {
  margin: 20px 40px;
  border: 1px solid #EBEEF5;
}
</style>
